import React, {JSX, useCallback} from 'react';
import {View, StyleSheet} from 'react-native';
import {BasicText} from '../../../kit/text';
import {SiginItem, useMakeMoneyContext} from '../index';
import SignIn from './SignIn';
import { useTranslation } from 'react-i18next';
import { normalize } from '../../../utils/adapter';

const SiginTitle = React.memo(function (): JSX.Element {
  const makeMoneyCtx = useMakeMoneyContext();
  const { t } = useTranslation();
  return (
    <View style={styles.sigin_title}>
      <View>
        <BasicText color="#333333">
          {t('siginFirstRemarks')}
          <BasicText color="#FF943A" fontSize={normalize(24)}>
            {makeMoneyCtx?.maxSign}
          </BasicText>
          {t('siginLastRemarks')}
        </BasicText>
      </View>
      <View>
        <BasicText fontSize={normalize(10)} color="#999999">
          {t('siginedFirstRemarks')}
          <BasicText fontSize={normalize(16)} color="#FF943A">
            {makeMoneyCtx?.sigineds.length}
          </BasicText>
          {t('day')}
        </BasicText>
      </View>
    </View>
  );
});

const SigninSheet = React.memo(function (): JSX.Element {
  const makeMoneyCtx = useMakeMoneyContext();

  const onPress = useCallback((siginItem:SiginItem) => {
    const sigineds = makeMoneyCtx?.sigineds;
    if(sigineds?.includes(siginItem)){
        return;
    }
    sigineds?.push(siginItem);
    makeMoneyCtx?.setState({sigineds});
  },[makeMoneyCtx]);

  return (
    <View style={styles.sigin_container}>
      <SiginTitle />
      <View style={styles.signin_container}>
        {makeMoneyCtx?.siginList.map(item => (
          <SignIn key={item.value} item={item} onPress={onPress}/>
        ))}
      </View>
    </View>
  );
});

const styles = StyleSheet.create({
  sigin_container: {
    marginHorizontal: normalize(12),
    marginTop: normalize(20),
    backgroundColor: '#fff',
    padding: normalize(12),
    borderRadius: normalize(12),
  },
  sigin_title: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
  },
  signin_container:{
    flexDirection:'row',
    justifyContent:'space-around',
    marginTop:normalize(15),
  },
});

export default SigninSheet;
